<template>
    <div>
        <div class="header-title">
            <span @click="$router.go(-1)" class="mint-toast-icon mintui mintui-back"></span>
            <span></span>
            <span></span>
        </div>
        <div class="account-type">
            <p>USDT</p>
            <div>
                <div>
                    <div>
                        <p>可用</p>
                        <p>0.00000000</p>
                    </div>
                    <div>
                        <p>冻结</p>
                        <p>0.00000000</p>
                    </div>
                    <div>
                        <p>锁仓</p>
                        <p>0.00000000</p>
                    </div>
                    <div>
                        <p>折合（CNY）</p>
                        <p>0.00000000</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="account-title">
            <span>财务记录</span>
            <img @click="popupVisible =! popupVisible" src="../../assets/img/shaixuan.png" alt />
        </div>
        <!-- 列表 -->
        <div class="scroll-range">
            <mt-loadmore
                :top-method="loadTop"
                :bottom-method="loadBottom"
                :bottom-all-loaded="allLoaded"
                :autoFill="false"
                ref="loadmore"
            >
                <div class="account-list">
                    <div class="account-list-detail">
                        <p>划转</p>
                        <div>
                            <div>
                                <p>数量</p>
                                <p>0.00000000</p>
                            </div>
                            <div>
                                <p>状态</p>
                                <p>已完成</p>
                            </div>
                            <div>
                                <p>时间</p>
                                <p>2019-06-25</p>
                            </div>
                        </div>
                    </div>
                    <div class="account-list-detail">
                        <p>划转</p>
                        <div>
                            <div>
                                <p>数量</p>
                                <p>0.00000000</p>
                            </div>
                            <div>
                                <p>状态</p>
                                <p>已完成</p>
                            </div>
                            <div>
                                <p>时间</p>
                                <p>2019-06-25</p>
                            </div>
                        </div>
                    </div>
                </div>
                <bgStatus v-show="false" :bgImg = bgImg :bgWord = bgWord></bgStatus>
            </mt-loadmore>
        </div>
        <!-- 方式选择 -->
        <mt-popup class="chooseType" v-model="popupVisible" position="bottom">
            <p>全部</p>
            <p>充币</p>
            <p>提币</p>
            <p>C2C交易</p>
            <p @click="popupVisible =! popupVisible">取消</p>
        </mt-popup>
        <!-- 暂无收益明细 -->
    </div>
</template>
<script>
import bgStatus from '../../components/bgStatus'
export default {
    data() {
        return {
            
            popupVisible: false,
            //加载
            allLoaded: false, //数据是否加载完毕
            pageNum: 0,
            //暂无
            bgImg:require('../../assets/img/nonono.png'),
            bgWord:"暂无财务记录",
        };
    },
    components:{
        bgStatus
    },
    mounted() {
        mui(".mui-scroll-wrapper").scroll({
            deceleration: 0.0005
        });
    },
    methods: {
        //下拉刷新
        loadTop() {
            // 加载更多数据
            setTimeout(() => {
                this.$refs.loadmore.onTopLoaded();
            }, 1000);
        },
        //上拉加载
        loadBottom() {
            this.pageNum++;
            setTimeout(() => {
                this.$refs.loadmore.onBottomLoaded();
            }, 1000);
        }
    }
};
</script>
<style lang="less" scoped>
.header-title {
    color: @blackColor8;
}
.account-type {
    padding: 5px 15px 20px;
    border-bottom: 10px solid #f7f7fb;
    > p {
        font-size: 18px;
        color: @blueColor5;
        font-weight: bold;
        margin-bottom: 10px;
    }
    > div {
        > div {
            .flexBetween();
            p:nth-child(1) {
                font-size: 11px;
                color: @blackColor5;
                padding: 10px 0 5px;
            }
            p:nth-child(2) {
                font-size: 12px;
                color: @blackColor8;
            }
        }
    }
}
.account-title {
    padding: 15px;
    .flexBetweenCenter();
    font-size: 18px;
    color:@blackColor8;
    font-weight: bold;
    img {
        width: 13px;
    }
}
// 列表
.scroll-range {
    height: 60vh;
    .account-list {
        width: 100%;
        padding: 0 15px 15px;
        .account-list-detail {
            border-bottom: 1px solid @blackColor3;
            padding-bottom: 10px;
            margin-bottom: 10px;
            > p {
                font-size: 14px;
                color: @blueColor10;
                font-weight: bold;
                margin-bottom: 8px;
            }
            > div {
                .flexStart();
                > div {
                    p:nth-child(2) {
                        color: @blackColor5;
                        font-size: 12px;
                    }
                }
                > div:nth-child(1) {
                    width: 30%;
                }
                > div:nth-child(2) {
                    width: 20%;
                }
                > div:nth-child(3) {
                    width: 50%;
                    text-align: right;
                }
            }
        }
    }
}
// 方式选择
.chooseType {
    width: 100%;
    padding: 0 20px;
    text-align: center;
    border-radius: 20px 20px 0 0;
    p {
        font-size: 16px;
        color: @blackColor7;
        padding: 15px 0;
        border-bottom: 1px solid #f4f4f4;
        font-weight: bold;
    }
    p:first-child,
    p:last-child {
        color: @blueColor5;
    }
}
</style>
